<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/views/include/taglib.jsp" %>

<html lang="en">
<head>
    <!-- jsp文件头和头部 -->
    <%@include file="/WEB-INF/views/include/top.jsp" %>
    <title>demo</title>
    <style>
    .form-control-radio{
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    /* transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; */

    }
    img{
    	width:140px;
    	height:140px;
    }
    </style>
</head>
<body>
<input type="hidden" class="form-control" name="productId" id="productId" value="${productId }">
<input type="hidden" class="form-control" name="brandId" id="brandId" value="${brandId }">
<input type="hidden" class="form-control" name="pri_img_id" id="pri_img_id" value="${productDto.imgId }">

        <div class="index-common-title bottom-title">
            <div class="index-common-title-left bottom-left"></div>
            <div class="index-common-title-text bottom-text">品牌  &gt; <a href="${ctx }/sys/productItemView?brandId=${brandId }">产品 </a> &gt; 产品编辑</div>
        </div>
<div class="page-content">
			<div><!-- 		<div class="container"> -->
				<div class="panel panel-default">
					<div class="panel-body">
						<form class="form-horizontal"  autocomplete="off">
							<div class="form-group">
								<label class="col-sm-2 control-label">产品名称 </label>
								<div class="col-sm-3">
									<input type="text" class="form-control" name="productName" id="productName" value="${productDto.name }"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">产品类别</label>
								<div class="col-sm-3">
									<input class="form-control" disabled="disabled" name="brandName" value="${brandName }" id="brandName" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">售      价</label>
								<div class="col-sm-3">
									<input type="number"class="form-control" name="price" id="price" placeholder="" value="${productDto.price }" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">首      付</label>
								<div class="col-sm-3">
									<input type="number" class="form-control" name="downpayment" id="downpayment" placeholder=""  value="${productDto.downPayment }" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">月      供</label>
								<div class="col-sm-3">
									<input type="number" readonly="readonly" class="form-control" name="monthlyPrice " id="monthlyPrice" placeholder="" value="${productDto.monthlyPayment }" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">产品信息</label>
								<div class="col-sm-10">
									<div>
					 					<div class="form-group">
											<div class="col-sm-6">
												<label class="col-sm-6 control-label">cpu(手机、笔记本、台式)</label>
												<div class="col-sm-6">
													<input type="text" class="form-control" name="cpu" id="cpu" placeholder="" value="${productDto.cpu}">
												</div>
											</div>
											<div class="col-sm-6">
												<label class="col-sm-6 control-label">ROM/磁盘(手机、笔记本、台式)</label>
												<div class="col-sm-6">
													<input type="text" class="form-control" name="rom" id="rom" placeholder="" value="${productDto.rom}">
<!-- 													<select id="rom"> -->
<!-- 														<option value="2G">2G</option> -->
<!-- 														<option value="3G">3G</option> -->
<!-- 														<option value="4G">4G</option> -->
<!-- 														<option value="6G">6G</option> -->
<!-- 														<option value="8G">8G</option> -->
<!-- 														<option value="16G">16G</option> -->
<!-- 														<option value="32G">32G</option> -->
<!-- 													</select> -->
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-6">
												<label class="col-sm-6 control-label">内存(手机、笔记本、台式、相机)</label>
												<div class="col-sm-6">
													<input type="text" class="form-control" name="ram" id="ram" placeholder="" value="${productDto.ram}">
												</div>
											</div>
											<div class="col-sm-6">
												<label class="col-sm-6 control-label">分辨率(手机、笔记本、台式)</label>
												<div class="col-sm-6">
													<input type="text" class="form-control" name="resolution" id="resolution" placeholder="" value="${productDto.resolution}">
<!-- 													<select id="resolution"> -->
<!-- 														<option value="1366*768">1366*768</option> -->
<!-- 														<option value="1920*1080">1920*1080</option> -->
<!-- 														<option value="3840*2160">3840*2160</option> -->
<!-- 													</select> -->
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-6">
												<label class="col-sm-6 control-label">摄像头(手机、相机)</label>
												<div class="col-sm-6">
													<input type="text" class="form-control" name="camera" id="camera" placeholder="" value="${productDto.camera}">
												</div>
											</div>
											<div class="col-sm-6">
												<label class="col-sm-6 control-label">屏幕(手机、笔记本、台式)</label>
												<div class="col-sm-6">
													<input type="text" class="form-control" name="screenSize" id="screenSize" placeholder="" value="${productDto.screenSize}">
												</div>
											</div>
										</div>
									<div class="form-group">
										<div class="col-sm-6">
											<label class="col-sm-6 control-label">卡槽(手机)</label>
											<div class="col-sm-6">
												<input type="text" class="form-control" name="card" id="card" placeholder="" value="${productDto.card}">
											</div>
										</div>
										<div class="col-sm-6">
											<label class="col-sm-6 control-label">网络(手机)</label>
											<div class="col-sm-6">
												<input type="text" class="form-control" name="network" id="network" placeholder="" value="${productDto.network}">
											</div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-6">
											<label class="col-sm-6 control-label">主机(相机)</label>
											<div class="col-sm-6">
												<input type="text" class="form-control" name="master" id="master" placeholder="" value="${productDto.master}">
											</div>
										</div>
										<div class="col-sm-6">
											<label class="col-sm-6 control-label">包(相机)</label>
											<div class="col-sm-6">
												<input type="text" class="form-control" name="bag" id="bag" placeholder="" value="${productDto.bag}">
											</div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-6">
											<label class="col-sm-6 control-label">显卡(笔记本、台式)</label>
											<div class="col-sm-6">
												<input type="text" class="form-control" name="gcard" id="gcard" placeholder="" value="${productDto.gcard}">
											</div>
										</div>
										<div class="col-sm-6">
											<label class="col-sm-6 control-label">定位(笔记本、台式)</label>
											<div class="col-sm-6">
												<input type="text" class="form-control" name="position" id="position" placeholder="" value="${productDto.position}">
											</div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-6">
											<label class="col-sm-6 control-label">推荐理由(笔记本、台式)</label>
											<div class="col-sm-6">
												<input type="text" class="form-control" name="recommend" id="recommend" placeholder="" value="${productDto.recommend}">
											</div>
										</div>
									</div>
								</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">效果图片</label>
								<div class="col-sm-10">
									 <div class="col-sm-12 ct-col1">
						               	<table>
											<tr>
												<td><label><input multiple="true" type="file" name="uploadify" id="uploadify" /></label>&nbsp;&nbsp;</td>
												<td><div id="fileQueue"></div></td>
											</tr>
										</table>
						            </div>
						            <div class="col-sm-12 ct-col1">
						               	 <div class='content'>
										<section class='example'>
							        		<div class='gridly'>
								        		<c:forEach items="${productDto.imgDtos}" var="dto">
								        			<div class='brick small'>
									           		 <a class='delete' href='#'>&times;</a>
									           		 	<img alt="" src="${ctx }/${dto.imgPaths}">
									         		 	<div align="center"><input type="radio" name="imgs" value="${dto.id}"/></div>
									         		 </div>
												</c:forEach>
										     </div>
									      </section>

							    		</div>
						            </div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">发布日期</label>
								<div class="col-sm-3">
								  <input type="text" class="form-control" name="time" id="time" placeholder=""  />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">顺序排列</label>
								<div class="col-sm-3">
									<input type="number" class="form-control" name="sort" id="sort" placeholder="" value="${productDto.showIndex}">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">淘宝地址</label>
								<div class="col-sm-3">
									<input type="text" class="form-control" name="salesLink" id="salesLink" placeholder="" value="${productDto.salesLink}">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">是否发布</label>
								<div class="col-sm-3">
									<c:choose>
									   <c:when test="${productDto.hasPublic==1}">
									  	 <input type="checkbox" class="form-control" name="release" id="release" placeholder=""  checked="checked" />
									   </c:when>
									   <c:otherwise>
									   <input type="checkbox" class="form-control" name="release" id="release" placeholder=""  />
									   </c:otherwise>
									</c:choose>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label"> 推      荐</label>
								<div class="col-sm-3">
									<c:choose>
									   <c:when test="${productDto.hot==1}">
									  	 <input type="checkbox" class="form-control" name="hot" id="hot" placeholder=""  checked="checked"/>
									   </c:when>
									   <c:otherwise>
									   <input type="checkbox" class="form-control" name="hot" id="hot" placeholder=""  />
									   </c:otherwise>
									</c:choose>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">详细说明</label>
								<div class="col-sm-10">
									利用本编辑工具，可以编辑图文并茂的产品内容图文，也可上传多幅图片和制作表格等。
								</div>
							</div>

							<div class="form-group" align="center">
								<script  id="editor" type="text/plain" height="500px">
									${productDto.content}
								</script>
							</div>
						</form>

					</div>
					<div class="modal-footer">
						 <button id="save"  type="submit"  class="btn btn-primary" >保存</button>
						<button type="button" data-dismiss="modal" class="btn btn-default">返回</button>
					</div>
				</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

<!-- <div id="btns"> -->

<!--     <div> -->
<!--         <button onclick="getLocalData()" >获取草稿箱内容</button> -->
<!--         <button onclick="clearLocalData()" >清空草稿箱</button> -->
<!--     </div> -->

<!-- </div> -->
<script type="text/javascript" src="${ctxAssets}/js/lib/gridly/jquery.js"></script>
<script type="text/javascript" src="${ctxAssets}/js/lib/jquery/jquery.cookie.js"></script>
<script src="${ctx}/assets/js/lib/jquery-validation/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctxAssets}/css/lib/uploadify.css" />
<script type="text/javascript" src="${ctxAssets}/js/lib/jquery-uploadify/swfobject.js"></script>
<script type="text/javascript" src="${ctxAssets}/js/lib/jquery-uploadify/jquery.uploadify.v2.1.0.js"></script>


 	<script type="text/javascript" charset="utf-8" src="${ctx}/admin/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/admin/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${ctx}/admin/ueditor/lang/zh-cn/zh-cn.js"></script>



	 <link href='${ctxAssets}/css/lib/gridly/jquery.gridly.css' rel='stylesheet' type='text/css'>
     <link href='${ctxAssets}/css/lib/gridly/sample.css' rel='stylesheet' type='text/css'>
     <script src='${ctxAssets}/js/lib/gridly/jquery.gridly.js' type='text/javascript'></script>
     <script src='${ctxAssets}/js/lib/gridly/rainbow.js' type='text/javascript'></script>







	<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{initialFrameHeight:500});
    function getContent() {
        return UE.getEditor('editor').getContent();
    }

    function getLocalData () {
        alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
    }
    function clearLocalData () {
        UE.getEditor('editor').execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }
   $(window).resize(function(){
	   $("#edui1").width($("#editor").width());
   });

   var webRoot = G_WEB_ROOT;
	  var urls = {
		        getTypeUrl: webRoot + "/sys/ueditor/queryType.do",
		        saveUrl: webRoot + "/sys/saveOrUpdateProduct.do"
		    };


	$('.form-horizontal').validate({
          errorElement: 'span',
          errorClass: 'help-block',
          focusInvalid: false,
          rules: {
              'productName': {
                  required: true
              },
              'price': {
                  required: true
              },
          },
          messages: {
              'productName': {
                  required: msg.wPNNotNull
              },
              'price': {
                  required: msg.wPriceNotNuLL
              },
          },
          highlight: function (element) {
              $(element).closest('.form-group').addClass('has-error');
          },
          success: function (label) {
              label.closest('.form-group').removeClass('has-error');
              label.remove();
          },
          errorPlacement: function (error, element) {
              element.parent('div').append(error);
          },
          submitHandler: function (form) {
          }
    });

	$("#save").click(function(){
		  if($('.form-horizontal').valid()){
			  var imgs=[];
			  var arr=[];
			  var sortArr=[];
			  $.each($('input[name="imgs"]'),function(i,o){
				  arr[arr.length]={val:$(this).val(),x:parseInt($(this).parent().parent().css("left")),y:parseInt($(this).parent().parent().css("top"))}
			  });
			  if(arr.length==0){
				 	 alert(msg.wPlaUpPhoto);
				  return;
			 	 }
			  $.each(arr,function(){
				  var bool=false;
				  for(var i=sortArr.length-1;i>=0;i--){
					  if(this.y>sortArr[i].y||(this.y==sortArr[i].y&&this.x>sortArr[i].x)){
						  sortArr.splice(i+1, 0, this);
						  bool=true;
						  break;
						}
				  }
				  if(!bool){
					  sortArr.splice(0, 0, this);
				  }
			  });
			  $.each(sortArr,function(){
				  imgs[imgs.length]=this.val;
			  });

			  var pri_img = $('input[name="imgs"]:checked ').val();
			  if(pri_img==undefined||pri_img==""){
				  alert(msg.wChoosePriPhoto);
				  return;
			  }
		   	 var	data={
		   			productId:$("#productId").val(),
		   			productName:$("#productName").val(),
		   			brandId:$("#brandId").val(),
		   			price:$("#price").val(),
		   			downpayment:$("#downpayment").val(),
		   			monthlyPrice :$("#monthlyPrice ").val(),
		   			cpu :$("#cpu").val(),
		   			ram :$("#ram").val(),
		   			rom :$("#rom").val(),
		   			screenSize :$("#screenSize").val(),
		   			resolution :$("#resolution ").val(),
		   			camera :$("#camera").val(),
		   			card :$("#card").val(),
		   			network :$("#network").val(),
		   			time :$("#time").val(),
		   			recommend:$("#recommend").is(':checked')?1:0,
		   			release:$("#release").is(':checked')?1:0,
		   			content:getContent(),
		   			sort :$("#sort").val(),
		   			master :$("#master").val(),
		   			bag :$("#bag").val(),
		   			gcard :$("#gcard").val(),
		   			position :$("#position").val(),
		   			recommend :$("#recommend").val(),
		   			salesLink :$("#salesLink").val(),
		   			hot :$("#hot").is(':checked') ? 1:0,
		   			imgs:imgs,
		   			pri_img:pri_img
		   		}
		   	 console.log($("#rom").val());
		   	     $.ajax({
		   	         url: urls.saveUrl,
		   	         type: 'post',
		   	         data: data,
		   	         success: function (data) {
// 		   	        	data = eval(data);
// 		   	          	notifyInfo(data.msg, data.type);
		   	        	 if(data=="true"||data==true){
			   	        		alert(msg.success);
			   	        		window.location.href = webRoot + '/sys/productItemView?brandId=' + $("#brandId").val();
			   	        	 }else{
			   	        		alert(msg.fail);
			   	        	 }
		   	         }
		   	     });
		  }

	});
    function notifyInfo(msg, type) {
     	if(type){
     		alert(msg.success);
     	}else{
     		alert(msg.fail);
     	}
     }

  	$(document).ready(function(){
  		var pri_img_id=$("#pri_img_id").val();
  		if(pri_img_id!=""){
  			 $.each($('input[name="imgs"]'),function(i,o){
  				 if($(this).val()==pri_img_id){
  					$(this).attr("checked",true);
  				 }
			  });
  		}
  	$("#uploadify").uploadify({
  		'scriptData':{'type': 2},	// 产品
        'uploader'	: webRoot +'/assets/plugin/uploadify/uploadify.swf',
        'script'	: webRoot +'/common/uploadify',	//上传后台
//         'cancelImg': webRoot +'/assets/plugin/uploadify/cancel.png',
        'queueID'	: 'fileQueue',
        'multi' :true,
        'auto': true,
        'buttonText': 'select',
        'simUploadLimit' : 1,
        'queueSizeLimit' : 10,
        'removeCompleted': false,
        'fileExt': '*.java;*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.zip;*.rar;*.7z',
        onComplete: function(event, queueID, fileObj, response, data) {
            //转换为json对象
            var dataObj = eval("("+response+")");
            var div=$(brick);
            var path=webRoot+"/"+dataObj.filePath;
            var img=$(' <img alt="" src="'+path+'">');
            $(div).append(img);
            $(div).append($('<div align="center"><input type="radio" name="imgs" value="'+dataObj.id+'"/></div>'));
            $('.gridly').append(div);
            return $('.gridly').gridly();
        },
        onSelect:function(e, queueId, fileObj){

        },
        onError: function(event, queueID, fileObj) {
            alert("文件:" + fileObj.name + "上传失败");
        }
    });
// 	$.ajax({
//         url: urls.getTypeUrl,
//         type: 'post',
//         async: false,
//         success: function(data) {
// //         	$.each(data.module,function(){
// //         		$("#moduleId").append($("<option value='"+this.moduleId+"'>"+this.moduleName+"</option>"));
// //         	});
// //         	$.each(data.navigate,function(){
// //         		$("#navigateId").append($("<option value='"+this.navigateId+"'>"+this.name+"</option>"));
// //         	});
//         }
//     });
  	});

  	 var brick;
     brick = "<div class='brick small'><div class='delete'>&times;</div></div>";

     $(document).on("click", ".gridly .delete", function(event) {
    	 console.log("delete")
       var $this;
       event.preventDefault();
       event.stopPropagation();
       $this = $(this);
       $this.closest('.brick').remove();
       return $('.gridly').gridly('layout');
     });

     $('.gridly').gridly();

     $("#price").change(function(){
    	 if(!setMonthlyPrice()){
    		 $("#price").val();
    		 alert("价格不能低于首付");
    	 }
     });

     $("#downpayment").change(function(){
    	 if(!setMonthlyPrice()){
    		 $("#downpayment").val(0);
    		 alert("首付不能高于价格");
    	 }
     });
     function setMonthlyPrice(){
    	 var price=parseInt($("#price").val());
    	 var downpayment=parseInt($("#downpayment").val());
//     	 if(price==""||downpayment==""){
//     		 return true;
//     	 }
    	 if(price<downpayment){
    		 return false;
    	 }
    	 $("#monthlyPrice").val(parseInt((price-downpayment)*0.075));
    	 return true;
     }
     function showInfoInput(){
//     	1	手机平板
//     	2	相机单反
//     	3	台式整机
//     	4	笔记本电脑
//     	0	首页
     	var selectClassifyId= $.cookie("selectClassifyId");;
     	$('#cpu').hide();
     	$('#rom').hide();
     	$('#ram').hide();
     	$('#resolution').hide();
     	$('#camera').hide();
     	$('#screenSize').hide();
     	$('#card').hide();
     	$('#network').hide();
     	$('#master').hide();
     	$('#bag').hide();
     	$('#gcard').hide();
     	$('#position').hide();
     	$('#recommend').hide();

     	if(1==selectClassifyId){
     		$('#cpu').show();
     		$('#rom').show();
     		$('#ram').show();
     		$('#resolution').show();
     		$('#camera').show();
     		$('#screenSize').show();
     		$('#card').show();
     		$('#network').show();
     	}else if (2==selectClassifyId){
     		$('#ram').show();
     		$('#camera').show();
     		$('#master').show();
     		$('#bag').show();
 		}else if (3==selectClassifyId){
     		$('#cpu').show();
     		$('#rom').show();
     		$('#ram').show();
     		$('#resolution').show();
     		$('#gcard').show();
     		$('#position').show();
     		$('#recommend').show();
     		$('#screenSize').show();
 		}else if (4==selectClassifyId){
     		$('#cpu').show();
     		$('#rom').show();
     		$('#ram').show();
     		$('#resolution').show();
     		$('#gcard').show();
     		$('#position').show();
     		$('#recommend').show();
     		$('#screenSize').show();
 		}else{
 		  	$('#cpu')		.show();
 	    	$('#rom')		.show();
 	    	$('#ram')		.show();
 	    	$('#resolution').show();
 	    	$('#camera')	.show();
 	    	$('#screenSize').show();
 	    	$('#card')		.show();
 	    	$('#network')	.show();
 	    	$('#master')	.show();
 	    	$('#bag')		.show();
 	    	$('#gcard')		.show();
 	    	$('#position')	.show();
 	    	$('#recommend')	.show();
 		}
     }
     showInfoInput();

</script>


</body>
</html>